<template>
    <ul class="chat-tool-bar">
        <!-- <li class='list' @click="reAnswer" v-show='isShowAnswer'>
            <img :src="getAssetsFile('refresh.svg')" alt="重新生成" :class="isRefresh ? 'fresh' : ''">
            <span>重新生成</span>
        </li> -->

        <li class='list' @click="copyText">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="复制内容"
                placement="bottom"
            >
                <img :src="getAssetsFile('copy.svg')" alt="复制">
            </el-tooltip>
            <!-- <span>复制内容</span> -->
        </li>
    </ul>
</template>

<script lang="ts" setup>
    import { ref,defineProps,defineEmits,defineExpose } from 'vue'
    import getAssetsFile from '../../utils/pub-use'
    const props = defineProps({
        isShowAnswer:{
            type:Boolean,
            default:()=>false
        }
    })
    const isRefresh = ref(false)
    const emit = defineEmits(['reAnswer','copyText'])
    const reAnswer = ()=>{
        let refreshTimer = null;
        isRefresh.value = true;
        if(isRefresh.value){
            refreshTimer = setTimeout(()=>{
                isRefresh.value = false;
            },800)
        }
        emit('reAnswer')
    }

    const copyText = ()=>{
        emit('copyText')
    }
    defineExpose({})
</script>

<style scoped lang="scss">
    .chat-tool-bar{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-radius: 0 0 var(--crp-border-radius-base) var(--crp-border-radius-base);
        background: var(--crp-bg-color);
        margin:0;
        padding: 0 16px 16px 16px;
        .list{
            display: flex;
            align-items: center;
            font-size: var(--crp-font-size-extra-small);
            color: var(--crp-text-color-secondary);
            cursor: pointer;
            &:hover{
                color:var(--crp-colors-primary-base);
            }
            img{
                width: 16px;
                height: 16px;
            }
            .fresh{
                animation:newframes 0.5s;
            }
            @keyframes newframes {
                0%{
                transform: rotate(0deg);
                }
                25%{
                transform: rotate(-60deg);
                }
                50%{
                transform: rotate(-120deg);
                }
                75%{
                transform: rotate(-60deg);
                }
                100%{
                transform: rotate(0deg);
                }
            }
            span{
                margin-left: var(--crp-margin-extra-small);
                font-size: var(--crp-font-size-base);
            }
        }
        .list:not(:last-child){
            margin-right: var(--crp-margin-base);
        }
    }
</style>
